<template>
  <div class="userhome">
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in booms" :key="item.id">
          <van-image :src="item.url" />
        </van-swipe-item>
      </van-swipe>

      <NewList :loadMore="loadMore" :news="news" />
    </div>
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, computed, watch } from "vue";
import { BoomService } from "@/api/booms";
import { Notify, Toast } from "vant";
import NewList from "@/components/news/index.vue";
import { useStore } from "vuex";
export default {
  name: "UserHome",
  components: { NewList },
  setup() {
    const store = useStore();
    const loadMore = () => {
      if (data.newTotal === data.news.length) {
        Toast("已全部加载");
        return;
      }
      data.page += 1;
    };
    let data = reactive({
      search_key: computed(() => store.state.Search.search_key),
      booms: [],
      news: [],
      page: 1,
      loadMore: loadMore,
      newTotal: 0,
    });
    const listbooms = () => {
      BoomService.booms().then((res) => {
        if (res.data.code == 0) {
          data.booms = res.data.data;
        } else {
          Notify({ type: "danger", message: res.data.message });
        }
      });
    };
    const listnews = (is_search = false) => {
      BoomService.news({ page: data.page, search_key: data.search_key }).then(
        (res) => {
          if (res.data.code == 0) {
            if (is_search) {
              data.news = res.data.data.news;
            } else {
              // @ts-ignore
              data.news = [...data.news, ...res.data.data.news];
            }
            data.newTotal = res.data.data.total;
          } else {
            Notify({ type: "danger", message: res.data.message });
          }
        }
      );
    };
    listbooms();
    listnews();
    watch(
      () => data.page,
      (newValue, oldVlaue) => {
        listnews();
      }
    );
    watch(
      () => data.search_key,
      (newValue, oldVlaue) => {
        listnews(true);
      }
    );
    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  font-size: 20px;
  text-align: center;
}
</style>

<style lang="less">
.userhome {
  margin-bottom: 70px;
  .van-image {
    width: 100% !important;
  }
  .van-swipe__indicator--active {
    background-color: rgb(80, 106, 223) !important;
  }
}
</style>